<link href="css/buttons.dataTables.min.css" rel="stylesheet">
<link href="css/select.dataTables.min.css" rel="stylesheet">

<div class="row">
    <div id="breadcrumb" class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="#">用户管理</a></li>
            <li><a href="#">APP用户管理</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <div class="box-name">
                </div>
                <div class="box-icons">
                    <a class="expand-link">
                        <i class="fa fa-expand"></i>
                    </a>
                </div>
                <div class="no-move"></div>
            </div>
            <div class="box-content no-padding">
                <table class="table table-bordered table-striped table-hover table-heading table-datatable"
                       id="appUserListTable">
                    <thead>
                    <tr>
                        <th>商铺编号</th>
                        <th>商户信息1</th>
                        <th>商户信息2</th>
                        <th>商户信息3</th>
                        <th>物业信息</th>
                        <th>业主信息</th>
                        <th>费用信息</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>商铺编号</th>
                        <th>商户信息1</th>
                        <th>商户信息2</th>
                        <th>商户信息3</th>
                        <th>物业信息</th>
                        <th>业主信息</th>
                        <th>费用信息</th>
                        <th>操作</th>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" role="dialog" id="formModel">
    <div class="modal-dialog" role="document" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="gridSystemModalLabel">门禁记录</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12" id="appUserDoorInfo">
                            <ul class="list-group">
                                <li class="list-group-item">开门时间: <span id="name">2015-5-8 22:00:19</span></li>
                                <li class="list-group-item">门禁代码: <span id="identityType">CDSESH</span></li>
                            </ul>
                            <ul class="list-group">
                                <li class="list-group-item">开门时间: <span id="name">2015-8-5 23:18:25</span></li>
                                <li class="list-group-item">门禁代码: <span id="identityType">CDSESH</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" role="dialog" id="ownerInfoformModel">
    <div class="modal-dialog" role="document" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="">业主详细信息</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-12" id="ownerInfo">
                            <h3>个人信息</h3>
                            <ul class="list-group">
                                <li class="list-group-item">姓名: <span id="name"></span></li>
                                <li class="list-group-item">证件类型: <span id="identityType"></span></li>
                                <li class="list-group-item">证件号码: <span id="identityCode"></span></li>
                                <li class="list-group-item">认证时间: <span id="authenticationTime"></span></li>
                                <li class="list-group-item">紧急联系人: <span id="urgent"></span></li>
                            </ul>
                            <h3>物业信息</h3>
                            <ul class="list-group" id="propertyInfo">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript">
    var editTable;//全局的datatable变量


    $('#appUserListTable tbody').on( 'click', 'button#detailRow', function () {
        $("#formModel").modal("show");//弹出框show

    });

    $('#appUserListTable tbody').on( 'click', 'button#delRow', function () {
        var comfirm=confirm("确定删除该用户?");
        if(comfirm)
        {
            alert("删除成功");
        }
    });

    $('#appUserListTable tbody').on( 'click', 'button#disableRow', function () {
        var comfirm=confirm("确定禁止该用户门禁权限?");
        if(comfirm)
        {
            var data = editTable.row($(this).parents('tr') ).data();
            console.log(data);
            $.ajax({
                type: "post",
                async: false,
                url: urlConfig.disableAppUser,
                data: {
                    phone:data.phone
                },
                dataType: "json", //返回数据形式为json
                success: function (result) {
                    if (result.status) {
                        alert("禁用成功");
                    }
                    else
                    {
                        alert(result.errorMsg.description);
                    }
                },
                error: function () {
                    alert("服务器连接失败,请重试!");
                }
            });
        }
    });

    $('#appUserListTable tbody').on( 'click', 'button#ownerDetailRow', function () {
        var data = editTable.row($(this).parents('tr') ).data();
        console.log(data);
        $.ajax({
            type: "get",
            async: false,
            url: urlConfig.getOwerInfoByID+"/"+data.ownerId,
            dataType: "json", //返回数据形式为json
            success: function (result) {
                if (result.status) {
                    var data=result.jsonString;
                    $("#ownerInfo #name").text(data.name);
                    $("#ownerInfo #identityType").text(data.identityType);
                    $("#ownerInfo #identityCode").text(data.identityCode);
                    $("#ownerInfo #authenticationTime").text(data.authenticationTime);
                    $("#ownerInfo #identityType").text(data.identityType);
                    $("#ownerInfo #urgent").text(data.urgentName+"("+data.urgentPhone+")");
                    $("#propertyInfo").empty();
                    for(var i in data.propertyEntities)
                    {
                        var temp='<ul class="list-group">' +
                                '<li class="list-group-item">物业编号: <span id="code">'+data.propertyEntities[i].code+'</span></li>'+
                                '<li class="list-group-item">物业地址: <span id="location">'+data.propertyEntities[i].location+'</span></li>'+
                                '<li class="list-group-item">状态: <span id="status">'+data.propertyEntities[i].status+'</span></li>' +
                                '<li class="list-group-item">物业面积: <span id="propertySquare">'+data.propertyEntities[i].propertySquare+'</span></li>'+
                                '</ul>';
                        $("#propertyInfo").append(temp);
                    }
                    $("#ownerInfoformModel").modal("show");//弹出框show
                }
                else
                {
                    alert(result.errorMsg.description);
                }
            },
            error: function () {
                alert("服务器连接失败,请重试!");
            }
        });
    });


    //初始化表格数据
    function initDataTable(){
        editTable=$('#appUserListTable').DataTable({
            "processing":true,
            "serverSide": true,
            "ajax":{
                "url": urlConfig.appUserList,
                "dataSrc": "jsonString"
            },
            "columnDefs": [{
                "targets": 0,
                "data":"userName",
                "visible": true,
                "orderable": false,
                "searchable": false

            },{
                "targets": 1,
                "data":"phone",
                "visible": true,
                "orderable": false,
                "searchable": false

            },{
                "targets": 2,
                "data":"userRole",
                "visible": true,
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if (data==1)
                        return "家庭成员";
                    else if (data==2)
                        return "租户";
                    else if(data==3)
                        return "业主";
                }

            },{
                "targets": 3,
                "data":"registerTime",
                "visible": true,
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    var register_date=new Date();
                    register_date.setTime(data);
                    return register_date.toLocaleDateString().replace(/\//g, "-");
                }

            },{
                "targets": 4,
                "data":"status",
                "visible": true,
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if (data==1)
                        return "正常";
                    else if(data==-1)
                        return "禁用";
                    else
                        return "异常";
                }

            },{
                "targets": 5,
                "data": "userRole",
                "orderable": false,
                "searchable": false,
                "render": function ( data, type, row ) {
                    if (data==3)
                        return "--";
                    else if(row.ownerId!=null)
                        return "<button id='ownerDetailRow' class='btn btn-primary' type='button'>业主信息</button>";
                    else
                        return "未绑定";
                }
            },{
                "targets": 6,
                "data": null,
                "orderable": false,
                "searchable": false,
                "defaultContent":
                        "<button id='detailRow' class='btn btn-primary' type='button'>查看</button>"
            },{
                "targets": 7,
                "data": null,
                "orderable": false,
                "searchable": false,
                "defaultContent":
                "<button id='disableRow' class='btn btn-primary' type='button'>禁用</button>"+
                "<button id='delRow' class='btn btn-primary' type='button'>删除</button>"
            }],
            "aaSorting": [[ 1, "asc" ]],
            "autoWidth":false,
            "sDom":
                    "<'box-content'<'col-sm-6'f><'col-sm-6 text-right'l><'clearfix'>>tr<'box-content'<'col-sm-6'i><'col-sm-6 text-right'p><'clearfix'>>",
            "language": {
                "emptyTable":     "没有相关数据",
                "info": "显示 _START_ 到 _END_ 条, 共 _TOTAL_ 条记录",
                "infoEmpty":      "没有相关数据",
                "infoFiltered":   "(筛选自 _MAX_ 条记录)",
                "infoPostFix":    "",
                "thousands":      ",",
                "lengthMenu":     "每页显示 _MENU_ 条",
                "loadingRecords": "加载中",
                "processing":     "数据处理中",
                "search":         "搜索:",
                "zeroRecords":    "没有找到匹配数据",
                "paginate": {
                    "first":      "首页",
                    "last":       "末页",
                    "next":       "下一页",
                    "previous":   "上一页"
                },
                "aria": {
                    "sortAscending":  ":正序",
                    "sortDescending": ":倒序"
                }
            }
        });

    }
    $(document).ready(function() {
        LoadDataTablesScripts(initDataTable);
    });
</script>
